<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>
<body>
    <button id="box">get请求</button>
    <button id="box2">async和await</button>
    <button id="box3">post请求</button>
    <button id="box4">put请求</button>
    <button id="box5">delete请求</button>
    <script>
        let btn = document.getElementById('box');
        btn.onclick=function(){
            axios({
                url:'  http://localhost:3000/movie',
                method:'get',

            }).then(response=>{
                console.log(response)
            alert(JSON.stringify(response.data))
            },error=>{

            })
        }

        document.getElementById('box2').onclick=async ()=>{
           try {
            const response= await axios({
                url:' http://localhost:3000/movie'
            })
            alert(response.data)
           } catch (error) {
                console.log(error)
           }    
        }

        document.getElementById('box3').onclick=()=>{
            axios({
                url:'http://localhost:3000/movie',
                method:'post',
                data:{
                    name: "220213电影",
                     director: "220213导演"
                }
            }).then(response=>{
                    alert(response.data)
                },error=>{
                    console.log(error);
                })
        }

        document.querySelector('#box4').onclick=()=>{
            axios({
                url:'http://localhost:3000/movie/5',
                method:'put',
                data:{
                    name:'雷神',
                    director:'漫威'
                }
            }).then(response=>{
                alert(response.data)
            },error=>{
                console.log(error);
            })  
        }
        
        document.querySelector('#box5').onclick=async ()=>{
            try {
                const response = await axios({
                    url:'http://localhost:3000/movie/4',
                    method:'delete'
                })
                alert(response.data)
            } catch (error) {
                console.log(error);
            }
        }
    </script>
</body>
</html>